<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>router study</title>

<script src="vue.js"></script>
<style type="text/css">


</style>
</head>
<body>


<ol>
  <li>_routerRoot._route.fullPath,,可以查看当前网页的完整路径以及获取的参数</li>
</ol>


<div id="app">
  
  <!-- 由于当需要添加样式时需要操作Dom元素，所以有时这里的路由可以用a标签来跳转。使用router-links的话当操作DOm元素时就要用Vue的方法去操作DOm元素。
    这里因为练习所以使用router-link 。实际中如果vue操作DOm不熟悉可以转换a标签-->
  
  <router-link to="/login/12/thisname">登录 </router-link>
  <router-link to="/register">注册</router-link>
  
  <router-view></router-view>
  



 
</div>




<br>
<script src="vue-router.js"></script>
<script type="text/javascript">

var login = {
  template:"<h1>登录 + {{$route.params.id}}+{{ $route.params.name }} </h1>",
  data(){//组件的data是一个方法，并且必须返回一个对象
    return {
      msg:'123'
    }
  },
  created(){//组件的生命周期-钩子函数(所以是一个函数的写法)
      console.log(this.$route.params)//当前login组件的$route 方法
  }
}


var register = {
  template:"<h1>注册</h1>",
}


var router = new VueRouter({

  routes:[
        {path:'/login/:id/:name',component:login},
        {path:'/register',component:register},
  ],



})



  

var vm= new Vue({
  el: '#app',

  data: {
  	 
  },
 
  methods:{
  	

  },
  components:{

  },

  //将路由规则对象注册到vm实例上，用来监听url 地址的变化，然后展示对应的组件
  router:router  


})





</script>

	
</body>
</html>